<!-- 空白市场停用 -->
<template>
  <div class="has-foot-pb" style="margin-top: 8px">
    <Cell title="市场名称" :modelValue="detail.marketName" readonly />

    <FieldSelect
      v-model="formData.discontinuationReason"
      title="停用原因"
      required
      :url="`/data-dict/app/v2/dictionary/CTM_MARKET_DISABLE_TYPE`"
      label-name="dictName"
      value-name="dictCode"
      method="get"
      :params="dictParams"
      clear
    />

    <Cell title="停用说明" is-column custom divider :right="false" required>
      <qmp-field
        v-model="formData.discontinuationRemark"
        type="textarea"
        placeholder="输入内容"
        class="ctm-text-area"
      />
    </Cell>

    <div :class="['ctm-content-foot', { relative: keyboard.show }]">
      <div class="btn radius-larg ctm-btn-main" @click="onSubmit">确认</div>
    </div>
  </div>
</template>

<script lang="ts">
  import { reactive, toRefs, getCurrentInstance, nextTick } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import Cell from '@/components/Cell/index.vue'
  import FieldSelect from '@/components/FieldSelect/index.vue'
  import { disableItem, detailItem } from '@/apis/attractInvestment/blankMarket'
  import GetKeyboardMixin from '@/utils/useKeyboard'

  interface anyObjectModle {
    formData: any
    dictParams: object
    detail: any
    submiting: boolean
    [key: string]: any
  }
  export default {
    name: 'BlankMarketDisable',
    components: { Cell, FieldSelect },
    setup() {
      const $route = useRoute()
      const $router = useRouter()
      const { proxy }: any = getCurrentInstance()

      const state = reactive<anyObjectModle>({
        dictParams: { query: { appCode: 'slm', domainCode: 'marketing' }, type: 0 },
        formData: {
          discontinuationReason: '',
          discontinuationRemark: '',
          marketId: $route.query.id || '',
          associatedMarketCode: ''
        },
        detail: {},
        submiting: false
      })
      state.keyboard = {
        show: false
      }
      state.keyboard = GetKeyboardMixin()

      const getDetail = () => {
        const id = `${state.formData.marketId}`
        detailItem(id).then((res: any) => {
          state.detail = res.data

          state.formData.associatedMarketCode = (res.data && res.data.associatedMarketCode) || '' // 关联市场编码
        })
      }
      getDetail()

      const onSubmit = () => {
        if (state.submiting) return
        const data = { ...state.formData }

        if ([undefined, null, ''].includes(data.discontinuationReason)) {
          proxy.$toast('请选择停用原因')
          return
        }

        if ([undefined, null, ''].includes(data.discontinuationRemark)) {
          proxy.$toast('请输入停用原因')
          return
        }
        state.submiting = true
        disableItem(data)
          .then((res: any) => {
            if (res.success === 1) {
              proxy.$toast('停用成功')
              proxy.$SimpleEvents.emit('refreshCustomerChangeItem')

              nextTick(() => {
                $router.goBack()
              })
              state.submiting = false
            }
          })
          .catch((e: any) => {
            if (e) proxy.$toast(e)
            state.submiting = false
          })
      }

      return {
        ...toRefs(state),
        onSubmit
      }
    }
  }
</script>

<style scoped lang="less"></style>
